import React,{Component} from 'react';
// import styles from './index.less';
import styles from '../login/index.less';
import {
    Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,
  } from 'antd';
import { connect }  from 'react-redux';
import  { actionTypes } from './store';
import { Redirect,Link } from 'react-router-dom';
import md5 from 'md5';
// import { GetCapcha } from './getCapcha';

class RegisterPage extends Component{
    state = {
        confirmDirty: false,
        autoCompleteResult: [],
      };
	handleSubmit = (e) => {
        e.preventDefault();
        // 获取输入域的数据和error，用于在提交前的判断。如果!err才可以提交
		this.props.form.validateFields((err, values) => {
			if (!err) {
                this.props.handleSubmitInputValue(values)
			}
		});
    }
    // 确认密码是否一致
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
      }
    // 确认密码错误提示
    compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
        callback('密码不一致请重新输入!');
        }    
    else {
        callback();
        }
    }
    // 密码验证
    validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
    }
    callback();
    }
	render(){
        const { getFieldDecorator } = this.props.form;
        // const { autoCompleteResult } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        // const tailFormItemLayout = {
        // wrapperCol: {
        //     xs: {
        //     span: 24,
        //     offset: 0,
        //     },
        //     sm: {
        //     span: 16,
        //     offset: 8,
        //     },
        // },};
        // const prefixSelector = getFieldDecorator('prefix', {
        // initialValue: '86',
        // })
        if(!this.props.regisetStatus){
            return(
                <div className={styles.loginPage}>
                    <div className={styles.logo}>
                        <a href="#"><img src='../assets/logo_sn.png' /></a>
                    </div>
                    <div className={styles.mainBox}>
                        <h4 className={styles.title}>
                            <Link className={`${styles.span} ${styles.regist}`}  to='/login'>登录</Link>
                            <a className={styles.span}>·</a>
                            <Link className={`${styles.login} ${styles.span}`} to='/regset'>注册</Link>
                        </h4>
                        <div>
                            <Form onSubmit={this.handleSubmit}>
                                <Form.Item
                                        {...formItemLayout}
                                        label="昵称"
                                        >
                                        {getFieldDecorator('nickname', {
                                            rules: [
                                                { 
                                                    required: true, 
                                                    message: '请输入用户昵称!', whitespace: true
                                                },
                                                {
                                                    min:4,
                                                    message: '用户昵称不能少于8个字符！',
                                                },
                                                {
                                                    max:6,
                                                    message: '用户昵称不能大于12个字符！',
                                                }
                                        ]
                                    })(
                                            <Input  placeholder="请输入用户昵称"/>
                                        )}
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label="邮箱"
                                    >
                                    {getFieldDecorator('email', {
                                        rules: [{
                                        type: 'email', message: '请输入正确的邮箱!',
                                        }, {
                                        required: true, message: ' 请输入邮箱!',
                                        },
                                        {
                                            message:'请输入正确的邮箱！',
                                            pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
                                        }
                                    ],
                                    })(
                                        <Input placeholder="请输入邮箱"/>
                                    )}
                                </Form.Item>
                                <Form.Item
                                            {...formItemLayout}
                                            label="用户名"
                                            >
                                            {getFieldDecorator('account', {
                                                rules: [
                                                    { 
                                                        required: true, 
                                                        message: '请输入用户名!', whitespace: true
                                                    },
                                                    {
                                                        min:4,
                                                        message: '用户名不能少于8个字符！',
                                                    },
                                                    {
                                                        max:6,
                                                        message: '用户名不能大于12个字符！',
                                                    }
                                            ]
                                        })(
                                                <Input  placeholder="请输入用户名"/>
                                            )}
                                    </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label="密码"
                                    >
                                    {getFieldDecorator('password', {
                                        rules: [{
                                        required: true, message: '请输入密码!',
                                        }, {
                                        validator: this.validateToNextPassword,
                                        }],
                                    })(
                                        <Input type="password"  placeholder="请输入密码" />
                                    )}
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label="确认密码"
                                    >
                                    {getFieldDecorator('confirm', {
                                        rules: [{
                                        required: true, message: '请输入确认密码!',
                                        }, {
                                        validator: this.compareToFirstPassword,
                                        }],
                                    })(
                                        <Input type="password" onBlur={this.handleConfirmBlur} placeholder="请输入确认密码" />
                                    )}
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label="手机号"
                                    >
                                    {getFieldDecorator('phone', {
                                        rules: [{ required: true, message: '请输入手机号!' },
                                        {   message:'请输入正确的手机号码！',
                                            pattern:  /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
                                        }
                                    ],
                                    })(
                                        <Input style={{ width: '100%' }}  placeholder="请输入手机号码"/>
                                    )}
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    label="验证码"
                                    // extra="We must make sure that your are a human."
                                    >
                                    <Row gutter={8}>
                                        <Col span={12}>
                                        {getFieldDecorator('captcha', {
                                            rules: [{ required: true, message: '验证码错误!' }],
                                        })(
                                            <Input />
                                        )}
                                        </Col>
                                        <Col span={12}>
                                        <Button style={{padding:'0 12px'}}>获取验证码</Button>
                                        {/* <Button style={{padding:'0 12px'}}><GetCapcha/></Button> */}
                                        {/* <GetCapcha/> */}
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item >
                                    {getFieldDecorator('agreement', {
                                        rules: [{ required: true, message: '用户协议必选!' }],
                                        valuePropName: 'checked',
                                    })(
                                        <Checkbox style={{float:'left'}}>同意注册协议<a href="/agreement">《用户协议》</a></Checkbox>
                                    )}
                                </Form.Item>
                                <Form.Item >
                                    <Button  style={{width:'100%'}} type="primary" htmlType="submit">提交</Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </div>
            )
        }else{
            return  <Redirect to='/login'/>
        }
    
}
}

const mapState =(state) =>{
    console.log("000000",state.register.regisetStatus)
    return{
        regisetStatus:state.register.regisetStatus,
        account:state.login.account,
    }
}
const mapDispatch =(dispatch) =>({
		submiteFun(accountElem,passwoldElem){
			dispatch(actionTypes.login(accountElem.state.value,passwoldElem.state.value))
			console.log(accountElem.state.value,passwoldElem.state.value)
		},
	handleSubmitInputValue(values){
        const salt = 'fndjvrfewewq9eu!'
        for( var key in values){
            if(key =='password' || key =='confirm'){
                values[key] = md5(md5(values[key]+salt))
            }
        }
        dispatch(actionTypes.RegisterSubmit(values))
	},
})
// const WrappedNormalLoginForm = Form.create({ name: 'register' })(RegisterPage);
export default connect(mapState,mapDispatch)(Form.create({ name: 'register' })(RegisterPage));